<script lang="ts">
export default {
  options: {
    styleIsolation: "isolated"
  }
};
</script>
<script lang="ts" setup>
import uaMarkdown from "@/components/ua-markdown/ua-markdown.vue";

interface ChatItemProps {
  message?: string;
  messageId?: string;
  playing?: number;
  voiceTime?: number;
  voiceUrl?: string;
  isload?: boolean;
  isLast?: boolean;
  hasCursor?: boolean;
  showCopy?: boolean;
  bgColor?: string;
  color?: string;
}
const props = withDefaults(defineProps<ChatItemProps>(), {
  color: "#333333"
});

const emit = defineEmits(["play"]);
</script>
<template>
  <view class="bubble robot-bubble" v-if="isload || message?.length">
    <view class="content">
      <view class="loading" v-if="isload">
        <view></view>
        <view></view>
        <view></view>
      </view>

      <template v-if="message?.length">
        <view
          :class="['text', { cursor: hasCursor }]"
          :style="{ background: bgColor, color }"
        >
          <uaMarkdown :source="message" />
        </view>
      </template>
    </view>
  </view>
</template>
<style lang="scss" scoped>
@keyframes cursorAni {
  100% {
    opacity: 0;
  }
}
.text {
  padding: 16px;
  border-radius: 10px;
  border-top-left-radius: 0;
  background-color: var(--bg-robot-bubble);
  ::v-deep .vuepress-markdown-body {
    background: transparent;
    padding: 0;
    font-size: 14px;
  }
}
@keyframes load {
  100% {
    transform: translateY(-5px);
  }
}
.export {
  text-align: right;
}
.bubble {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40rpx;
  .content {
    color: #17181c;
    font-size: 14px;
    box-sizing: border-box;
    word-wrap: break-word;
    max-width: 100%;
    text-align: justify;
    position: relative;
  }
  .copy {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    width: 32px;
    height: 32px;
  }
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    > view {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #406ffd;
      margin: 0 2px;
      animation: load 0.3s ease infinite alternate;
    }
    > view:nth-child(2) {
      animation-delay: 0.5s;
    }
  }
}
</style>
